//处理路径的模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') //自动生成输出文件，并且动态加载引入文件

module.exports = {
    mode: 'development', //环境设置为开发环境
    //项目入口文件
    entry: {
        app: './src/index.js',
    },
    // 配置输出选项
    output: {
        // filename: '[name].[contenthash].js', //contenthash，资源内容变化时，contenthash也会变化，会重新请求新的文件
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'), //配置输出的路径
        clean: true, //每次构建前清理dist文件夹
    },
    devtool: 'inline-source-map', //开发工具
    devServer: {
        contentBase: './dist', //告知 dev server，从dist文件夹查找文件
        hot: true, //启动HMR
    },
    // 配置第三方 loader 模块
    module: {
        // 文件的匹配规则
        rules: [
            {
                test: /\.css$/i,  // css
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,  // images
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|ttf|otf|eot)$/i,  // fonts
                type: "asset/resource",
            },
        ]
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Cache'
        })
    ],
}